<template>
  <div class="wrapper" :class="[isCollapse === true ? 'hideSidebar' : '']">
    <!-- 左侧侧边栏 -->
    <div class="sidebar-wrapper">
      <!-- 侧边栏logo -->
      <div class="sidebar-logo-contain">
        <transition name="sidebarLogoFade">
          <router-link to="/" class="logo-link" v-if="isCollapse" key="collapse">
            <img v-if="logo" src="../assets/home.png" alt="">
            <span v-else>{{ title }}</span>
          </router-link>
          <router-link to="/" class="logo-link" v-else key="expand">
            <img v-if="logo" src="../assets/home.png" alt="">
            <span>{{ title }}</span>
          </router-link>
        </transition>
      </div>
      <!-- 侧边栏滚动菜单 -->
      <div class="sidebar-main">
        <el-scrollbar>
          <el-menu
            :default-active="activeMenu"
            :collapse="isCollapse"
            :unique-opened="true" 
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409eff"
            class="el-menu-vertical-demo"
            router>
            <d-menu-item
              v-for="(item, index) in finalURoutes"
              :key="`${index}${item.path}`"
              :item="item"
            />
          </el-menu>
          <!-- <el-menu default-active="/" class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#304156"
          text-color="#bfcbd9" active-text-color="#409eff" :unique-opened="true" router>
            <el-menu-item index="/">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="/info">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">信息管理</span>
              </template>
              <el-menu-item index="/info/password">
                <i class="el-icon-menu"></i>
                <span slot="title">密码管理</span>
              </el-menu-item>
              <el-menu-item index="/info/collect">
                <i class="el-icon-document"></i>
                <span slot="title">收藏管理</span>
              </el-menu-item>
              <el-submenu index="/info/test">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span slot="title">测试管理</span>
                </template>
                <el-menu-item index="/info/test/test1">
                  <i class="el-icon-menu"></i>
                  <span slot="title">测一管理</span>
                </el-menu-item>
                <el-menu-item index="/info/test/test2">
                  <i class="el-icon-document"></i>
                  <span slot="title">测二管理</span>
                </el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="/system">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">系统管理</span>
              </template>
              <el-menu-item index="/system/role">
                <i class="el-icon-menu"></i>
                <span slot="title">角色管理</span>
              </el-menu-item>
              <el-menu-item index="/system/menu">
                <i class="el-icon-menu"></i>
                <span slot="title">菜单管理</span>
              </el-menu-item>
              <el-menu-item index="/system/user">
                <i class="el-icon-menu"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="/system/api">
                <i class="el-icon-menu"></i>
                <span slot="title">接口管理</span>
              </el-menu-item>
            </el-submenu>
          </el-menu> -->
        </el-scrollbar>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="main-wrapper">
      <div class="main-navbar">
        <div class="navbar-left">
          <div class="hamburger-icon" @click="changeCollapse">
            <i class="el-icon-s-fold" v-if="isCollapse === false"></i>
            <i class="el-icon-s-unfold" v-else></i>
          </div>
          <!-- 面包屑 -->
          <dBreadcrumb class="breadcrumb-container" />
        </div>
        <div class="navbar-right">
          <div class="navbar-logout" @click="logout">
            <el-tooltip content="退出登录" placement="left">
              <i class="el-icon-switch-button"></i>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!-- 标签 -->
      <div class="tags-navbar"></div>
      <!-- 主内容 -->
      <div class="main-contain">
        <el-scrollbar style="height:100%;">
          <router-view></router-view>
        </el-scrollbar>
      </div>
      <!-- 底部 -->
      <!-- <div class="main-footer"></div> -->
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      title: '个人信息管理系统',
      logo: '../assets/home.png',
      isCollapse: false
    }
  },
  computed: {
    ...mapGetters([
      'finalURoutes'
    ]),
    activeMenu () { // 处理路由页面高亮
      const route = this.$route
      const { meta, path } = route
      // 排除授权页面的高亮
      if (path.indexOf('/system/perm') !== -1) {
        return '/system/role'
      }if (path.indexOf('/index') !== -1) {
        return '/'
      }
      if (path.indexOf('/info/addMemery') !== -1 || path.indexOf('/info/editMemery') !== -1) {
        return '/info/memery'
      }
      if (meta.activeMenu !== '') {
        return meta.activeMenu
      }
      return path
    }
  },
  methods: {
    ...mapActions({
      removeInfo: 'user/removeInfo'
    }),
    logout () { // 退出登录
      this.removeInfo()
      this.$router.push({ path: '/login' })
    },
    changeCollapse () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style lang="scss">
/* element滚动条组件 隐藏水平滚动条 */
.sidebar-wrapper .el-scrollbar__wrap {
  overflow-x: hidden;
}
.main-contain .el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
  display: flex;
}
.main-contain > .el-scrollbar > .el-scrollbar__wrap {
  background: #fff;
  border: 1px solid #DCDFE6;
}
.main-contain > .el-scrollbar > .el-scrollbar__wrap > .el-scrollbar__view {
  // margin-right: 15px;
  // height: 100%;
  flex: 1 1 auto;
  flex-shrink: 0;
  display: flex;
}
.el-scrollbar__bar.is-horizontal {
  opacity: 0 !important;
  display: none;
}
.sidebar-main .el-submenu .el-menu-item,
.sidebar-main .nest-menu .el-submenu>.el-submenu__title {
  min-width: 210px !important;
  background-color: #1f2d3d !important;
}

.sidebar-main .el-submenu .el-submenu,
.sidebar-main .el-submenu .el-submenu>.el-submenu__title {
  background: #223245 !important;
  min-width: 210px !important;
}
</style>

<style lang="scss" scoped>
.el-menu {
  border-right: 0 !important;
}

.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}
.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}


.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
}
::v-deep .el-menu--collapse {
  width: 64px;
}
// 解决菜单折叠时文字未隐藏bug
::v-deep .el-menu--collapse .el-submenu__title span{
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}
.el-menu--collapse .el-submenu__icon-arrow{
  display: none;
}
.hideSidebar {
  .sidebar-wrapper {
    width: 64px !important;
    .sidebar-logo-contain {
      width: 64px !important;
    }
  }
  .main-wrapper {
    margin-left: 64px !important;
    .main-footer {
      margin-left: 64px !important;
    }
  }
}
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  .sidebar-wrapper {
    width: 210px;
    height: 100%;
    background-color: #304156;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    overflow: hidden;
    transition: width 0.28s;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    .sidebar-logo-contain {
      width: 100%;
      transition: width 0.28s;
      height: 50px;
      .logo-link {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    .sidebar-main {
      height: calc(100% - 50px);
      .el-scrollbar {
        height: 100%;
      }
    }
  }
  .main-wrapper {
    height: 100%;
    margin-left: 210px;
    background: #f1f4f5;
    transition: margin-left 0.28s;
    .main-navbar {
      height: 50px;
      background-color: #fff;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .navbar-left {
        display: flex;
        align-items: center;
        .hamburger-icon {
          font-size: 20px;
          height: 50px;
          line-height: 50px;
          padding: 0 15px;
          &:hover {
            cursor: pointer;
            background: rgba(0,0,0,.025);
          }
        }
      }
      .navbar-right {
        .navbar-logout {
          font-size: 20px;
          height: 50px;
          line-height: 50px;
          padding: 0 15px;
          &:hover {
            cursor: pointer;
            background: rgba(0,0,0,.025);
          }
        }
      }
    }
    .tags-navbar {
      height: 34px;
      width: 100%;
      background: #fff;
      border-bottom: 1px solid #d8dce5;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    }
    .main-contain {
      height: calc(100% - 115px);
      margin: 15px 15px 15px 15px;
      box-sizing: border-box;
      position: relative;
    }
    .main-footer {
      height: 40px;
      margin-left: 210px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      border-top: 1px solid #d8dce5;
      transition: margin-left 0.28s;
    }
  }
}
</style>